<template>
    <div class="app-container">
        <div class="search-box">
            <div class="search-tit"><span></span>查询条件</div>
            <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true" v-show="showSearch"
                label-width="110px">
                <el-form-item label="任务类别：" prop="taskType">
                    <el-select v-model="queryParams.taskType" placeholder="岗位状态" clearable>
                        <el-option v-for="dict in Option1" :key="dict.value" :label="dict.label" :value="dict.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="任务名称：" prop="taskName">
                    <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="任务编码：" prop="taskId">
                    <el-input v-model="queryParams.taskId" placeholder="请输入任务编码" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="绩效月份：" prop="jxMonth">
                    <el-date-picker v-model="queryParams.jxMonth" type="monthrange" range-separator="至"
                        start-placeholder="开始月份" end-placeholder="结束月份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="起始时间：" prop=" startTime">
                    <el-date-picker v-model="queryParams.startTime" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="任务状态：" prop="approveStatus">
                    <el-select v-model="queryParams.approveStatus" placeholder="任务状态" clearable>
                        <el-option v-for="dict in taskStatus" :key="dict.value" :label="dict.label" :value="dict.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="任务发起机构：" prop="OriginateAgency">
                    <el-input v-model="queryParams.OriginateAgency" placeholder="请输入任务发起机构" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item style="width:100%;text-align: right;padding: 5px;background-color: #f5f7fa;">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-tit"><span></span>任务列表</div>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain size="mini" @click="handleAdd">创建任务</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" plain size="mini">办结</el-button>
                <!--  @click="handleUpdate" v-hasPermi="['system:post:edit']" -->
            </el-col>

            <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
        </el-row>

        <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" border
            :header-cell-style="{ background: '#5abbf0', color: '#fff' }">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" align="center" type="index" :index="indexAdd" width="60" />
            <el-table-column label="任务编号" align="center" prop="taskId" />
            <el-table-column label="任务名称" align="center" prop="taskName" />
            <el-table-column label="任务类别" align="center" prop="taskType" />
            <el-table-column label="发放月份" align="center" prop="fafMonth" />
            <el-table-column label="起始时间" align="center" prop="startTime" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.startTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="绩效预发结果" align="center" prop="result" width="150px">
                <template slot-scope="scope">
                    <!-- <span>{{ scope.row.result }}</span> -->
                    <!-- <a :href="scope.row.jump">{{scope.row.result }}</a> -->
                    <router-link :to="{ path: '/emp/edit', query: { Id: scope.row.empId, type: 'edit' } }" title="编辑">
                        {{ scope.row.result }}
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column label="审核状态" align="center" prop="status">
                <template slot-scope="scope">
                    <!-- <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/> -->
                    <!-- <span>{{ scope.row.approveStatus }}</span> -->

                    <el-tag
                        :type="scope.row.approveStatus === '审批通过' ? 'success' : scope.row.approveStatus === '审批驳回' ? 'danger' : ''"
                        disable-transitions>{{ scope.row.approveStatus }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300px">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
                   
                    <router-link :to="{ path: '/task-mgt/performance', query: { Id: scope.row.taskId, type: 'edit' } }" title="编辑">
                        <el-button  type="text" size="mini" icon="el-icon-edit">修改</el-button>
                    </router-link>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        style="color: red;">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete">进度</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete">作废</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="self-table-pagination">
            <el-pagination class="user-pagination" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize"
                :total="queryParams.total" layout="total,sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>


        <!-- 添加或修改岗位对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body center>
            <el-divider></el-divider>
            <div class="dialog_box">
                <div class="srmk1">
                    <router-link :to="{ path: '/task-mgt/performance' }">
                        创建绩效预发任务
                    </router-link>
                </div>
                <div class="srmk1">
                    <router-link :to="{ path: '/emp/edit' }">
                        创建绩效预发任务
                    </router-link>
                </div>
                <div class="srmk1">
                    <router-link :to="{ path: '/emp/edit' }">
                        创建绩效预发任务
                    </router-link>
                </div>

            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { getTaskList, delList } from '@/api/taskMgt';

export default {
    name: "Post",
    dicts: ['sys_normal_disable'],
    data () {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 岗位表格数据
            postList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 页码数据
            total: 0,

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                taskId: "",  //任务编号
                taskName: "", //任务名称
                taskType: "不限", //任务类别
                jxMonth: "", //绩效月份
                startTime: "",  //起始时间
                approveStatus: "全部",  //任务状态
                OriginateAgency: ""   //机构
            },
            Option1: [
                {
                    label: "不限",
                    value: "0"
                },
                {
                    label: "绩效预发",
                    value: "1"
                },
                {
                    label: "绩效清算",
                    value: "2"
                }

            ],
            // 任务状态
            taskStatus: [
                {
                    label: "全部",
                    value: "0"
                },
                {
                    label: "创建中",
                    value: "1"
                },
                {
                    label: "待审批",
                    value: "2"
                },
                {
                    label: "审批中",
                    value: "3"
                },
                {
                    label: "审批驳回",
                    value: "4"
                },
                {
                    label: "审批通过",
                    value: "5"
                },
                {
                    label: "已办结",
                    value: "6"
                },
                {
                    label: "已作废",
                    value: "7"
                }

            ],
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                postName: [
                    { required: true, message: "岗位名称不能为空", trigger: "blur" }
                ],
                postCode: [
                    { required: true, message: "岗位编码不能为空", trigger: "blur" }
                ],
                postSort: [
                    { required: true, message: "岗位顺序不能为空", trigger: "blur" }
                ]
            },
            datevalue1: '',
            datevalue2: ''
        };
    },
    created () {
        this.getList();
    },
    watch: {
        total (n, o) {
            this.queryParams.total = n;

        },

    },
    mounted () {
        var els = document.querySelectorAll(".self-table-pagination").length;
        document.querySelectorAll(".el-pagination__jump")[els - 1].childNodes[0].nodeValue = "跳至";
    },
    methods: {
        // 监听 pagesize 改变的事件
        handleSizeChange (val) {
            this.queryParams.pageSize = val
            this.getList()

        },
        // 监听 页码值 改变的事件
        handleCurrentChange (val) {
            this.queryParams.pageNum = val
            this.getList()
        },
        // type序号 - 页面切换递增
        indexAdd (index) {
            const page = this.queryParams.pageNum // 当前页码
            const pagesize = this.queryParams.pageSize // 每页条数
            return index + 1 + (page - 1) * pagesize
        },
        /** 查询岗位列表 */
        getList () {
            this.loading = true;
            getTaskList(this.queryParams).then(response => {
                this.postList = response.data.content;
                this.queryParams.pageNum = response.data.pagenum
                this.queryParams.pageSize = response.data.pagesize
                this.queryParams.total = response.data.total;

                var els = document.querySelectorAll(".self-table-pagination").length;
                document.querySelectorAll(".el-pagination__total")[els - 1].innerHTML = '共' + this.queryParams.total + '条数据';
                this.loading = false;
            });

        },
        // 取消按钮
        cancel () {
            this.open = false;
            this.reset();
        },

        /** 搜索按钮操作 */
        handleQuery () {
            // this.queryParams.pageNum = 1;

            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange (selection) {
            // this.ids = selection.map(item => item.postId)
            // this.single = selection.length!=1
            // this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd () {
            this.open = true;
            this.title = "选择任务创建类型";
        },
        /** 修改按钮操作 */
        handleUpdate (row) {
            // getPost(postId).then(response => {
            //   this.form = response.data;
            //   this.open = true;
            //   this.title = "修改岗位";
            // });
        },
        /** 提交按钮 */
        submitForm: function () {
            // this.$refs["form"].validate(valid => {
            //   if (valid) {
            //     if (this.form.postId != undefined) {
            //       updatePost(this.form).then(response => {
            //         this.$modal.msgSuccess("修改成功");
            //         this.open = false;
            //         this.getList();
            //       });
            //     } else {
            //       addPost(this.form).then(response => {
            //         this.$modal.msgSuccess("新增成功");
            //         this.open = false;
            //         this.getList();
            //       });
            //     }
            //   }
            // });
        },
        /** 删除按钮操作 */
        handleDelete (row) {
            // 删除公告
            console.log(row.taskId)
            this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delList({
                    'id': row.taskId
                }).then(response => {
                    console.log(response.data)
                })
                this.getList()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        /** 导出按钮操作 */
        handleExport () {
            // this.download('system/post/export', {
            //   ...this.queryParams
            // }, `post_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
<style scoped lang="scss">
.el-dialog__wrapper {
    // height: 100%;
    overflow: hidden;

}

.dialog_box {
    width: 100%;
    padding: 20px;

    // background-color: rgba(51, 51, 51, 0.4470588235294118);
    .srmk1 {
        width: 189px;
        // height: 39px;
        background-color: #169bd5;
        margin: 0 auto;
        border-radius: 10px;
        text-align: center;
        padding: 10px 0;
        margin-bottom: 20px;

        a {
            color: #fff;
            text-decoration: unset;
        }
    }
}

.search-box {
    width: 100%;

    // padding-bottom: 20px;
    .el-form {
        .el-form-item {
            margin-right: 10px;

        }
    }
}

.el-pagination {
    text-align: right;
}

.search-tit {
    display: flex;
    font-weight: 650;
    font-size: 16px;
    padding: 10px 0 20px;
    box-sizing: border-box;

    span {
        width: 5px;
        height: 17px;
        background-color: rgb(0, 143, 223);
        border: none;
        border-radius: 4px;
        display: inline-block;
        margin-right: 10px;
    }
}

.mb8 {
    margin-bottom: 10px;

    .el-button {
        background: linear-gradient(74.3045deg, rgb(120, 197, 241) 14%, rgb(6, 161, 236) 78%);
        padding: 0 5px;
        height: 22px;
        color: #fff;
    }
}
::v-deep .el-date-editor.el-input,
::v-deep .el-input--medium .el-input__inner {
    width: 300px !important;
}

::v-deep .el-pagination__editor.el-input .el-input__inner{
    width: 30px !important;
}
::v-deep .el-dialog__body {
    padding-top: 0 !important;
}

::v-deep .cell {
    white-space: nowrap !important;
}
::v-deep .fixed-width .el-button--mini{
    margin-left: 10px;
}
.fixed-width .el-button--mini {
    padding: 0;
    min-width: auto;
}

.el-table .cell a,
.el-table .cell a:hover {
    color: #0099FF;
    text-decoration: underline;

}
</style>

  